<template>
  <el-select-v2 v-model="value" style="width: 100%" :multiple="false" filterable remote clearable :options="options" />
</template>

<script lang="ts" setup name="Education">
import { ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: [String, Number]
  }
});

const value = ref("");
const options = [
  { value: 1, label: "小学" },
  { value: 2, label: "初中" },
  { value: 3, label: "高中" },
  { value: 4, label: "大专" },
  { value: 5, label: "本科" },
  { value: 6, label: "硕士" },
  { value: 7, label: "博士" }
];

const emits = defineEmits(["update:modelValue"]);
watch(value, newValue => {
  emits("update:modelValue", newValue);
});

watch(
  () => props.modelValue,
  newValue => {
    if (value.value != newValue) value.value = parseInt(newValue);
  }
);
</script>
